<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeList from './components/KnowledgeList.vue'
import type { KnowledgeType } from '@/types/consult'
import FollowDoctor from './components/FollowDoctor.vue'

type ConsultingService = {
  toPath: string
  title: string
  desc?: string
  nameIcon: string
}

type ConsultingServices = ConsultingService[]

const consultingService = ref<ConsultingServices>([
  {
    toPath: '/article',
    title: '问医生',
    desc: '按科室查问医生',
    nameIcon: 'home-doctor',
  },
  {
    toPath: '/notify',
    title: '极速诊断',
    desc: '20s医生极速回复',
    nameIcon: 'home-graphic',
  },
  {
    toPath: '/user',
    title: '开药门诊',
    desc: '线上买药更方便',
    nameIcon: 'home-prescribe',
  },
])
const consultingServiceBase = ref<ConsultingServices>([
  {
    toPath: '/article',
    title: '药品订单',
    nameIcon: 'home-order',
  },
  {
    toPath: '/notify',
    title: '健康档案',
    nameIcon: 'home-docs',
  },
  {
    toPath: '/user',
    title: '我的处方',
    nameIcon: 'home-rp',
  },
  {
    toPath: '/user',
    title: '疾病查询',
    nameIcon: 'home-find',
  },
])

// 1. 知识列表切换
const active = ref<KnowledgeType>('recommend')
</script>

<template>
  <div class="home-page">
    <div class="home-page">
      <!-- 头部 -->
      <div class="home-header">
        <div class="con">
          <h1>窦傲杰的医院</h1>
          <div class="search">
            <cp-icon name="home-search" /> 搜一搜：疾病/症状/医生/健康知识
          </div>
        </div>
      </div>

      <!-- 咨询区 -->
      <div class="home-navs">
        <van-row>
          <van-col
            span="8"
            v-for="(item, index) in consultingService"
            :key="index"
          >
            <router-link :to="item.toPath" class="nav">
              <cp-icon :name="item.nameIcon"></cp-icon>
              <p class="title">{{ item.title }}</p>
              <p class="desc">{{ item.desc }}</p>
            </router-link>
          </van-col>
        </van-row>

        <van-row>
          <van-col
            span="6"
            v-for="(item, index) in consultingServiceBase"
            :key="index"
          >
            <router-link :to="item.toPath" class="nav min">
              <cp-icon :name="item.nameIcon"></cp-icon>
              <p class="title">{{ item.title }}</p>
            </router-link>
          </van-col>
        </van-row>
      </div>
      <!-- 广告轮播图 -->
      <div class="home-banner">
        <van-swipe loop indicator-color="#fff">
          <van-swipe-item>
            <img src="@/assets/ad.png" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="@/assets/ad.png" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 知识列表切换效果 -->
      <van-tabs v-model:active="active" shrink sticky>
        <van-tab title="关注" name="like">
          <follow-doctor></follow-doctor>
          <KnowledgeList :type="active"></KnowledgeList>
        </van-tab>
        <van-tab title="推荐" name="recommend">
          <KnowledgeList :type="active"></KnowledgeList>
        </van-tab>
        <van-tab title="减脂" name="fatReduction">
          <KnowledgeList :type="active"></KnowledgeList>
        </van-tab>
        <van-tab title="饮食" name="food">
          <KnowledgeList :type="active"></KnowledgeList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  padding-bottom: 50px;
}

.home-header {
  height: 100px;
  position: relative;
  &::before {
    content: '';
    width: 100%;
    height: 90px;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
  }

  .con {
    position: relative;
    padding: 0 15px;

    > h1 {
      font-size: 18px;
      color: #fff;
      font-weight: normal;
      padding: 20px 0;
      line-height: 1;
      padding-left: 5px;
    }

    .search {
      height: 40px;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: var(--cp-dark);
      font-size: 13px;
      .cp-icon {
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }
}

.home-navs {
  padding: 10px 15px 0 15px;

  .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;

    .cp-icon {
      font-size: 48px;
    }
    .title {
      font-weight: 500;
      margin-top: 5px;
      color: var(--cp-text1);
    }
    .desc {
      font-size: 11px;
      color: var(--cp-tag);
      margin-top: 2px;
    }
    &.min {
      .cp-icon {
        font-size: 31px;
      }
      .title {
        font-size: 13px;
        color: var(--cp-text2);
        font-weight: normal;
      }
    }
  }
}

.home-banner {
  padding: 10px 15px;
  height: 100px;
  img {
    width: 100%;
  }
}
</style>
